<template>
  <div class="right_center">
    <div class="left">
      <div class="chart" ref="myChart">
      </div>
      <div>
        <ul class="list">
          <li class="item">20岁以下
            <span class="num">{{age.age_20}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">20-30岁
            <span class="num">{{age.age_30}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">30-40岁
            <span class="num">{{age.age_40}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">40-50岁
            <span class="num">{{age.age_50}}</span>
            <span class="txt">个</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="right">
      <div class="chart" ref="myChart2">
      </div>
      <div>
        <ul class="list">
          <li class="item">残疾人
            <span class="num">{{specialPersonal.disable_cnt}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">退伍军人
            <span class="num">{{specialPersonal.female40_cnt}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">女性40岁
            <span class="num">{{specialPersonal.graduate_cnt}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">男性50岁
            <span class="num">{{specialPersonal.male50_cnt}}</span>
            <span class="txt">个</span>
          </li>
          <li class="item">毕业两年内大学生
            <span class="num">{{specialPersonal.soldier_cnt}}</span>
            <span class="txt">个</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {getAgeData, getSpecialPersonal, getSexData} from "../api";

export default {
  name: 'RightCenter',
  data () {
    return {
      value: '23',
      chart1_data: [],
      chart2_data: [
        {
          name: '20岁以下',
          value: 23
        },
        {
          name: '20-30岁',
          value: 43
        },
        {
          name: '30-40岁',
          value: 46
        },
        {
          name: '40-50岁',
          value: 20
        }, {
          name: '50岁以上',
          value: 30
        }
      ],
      age: {},
      specialPersonal: {},
      newChart1Data: [{}, {}, {}, {}, {}],
      newChart2Data: []
    }
  },
  methods: {
    init () {
      const getChartDom = this.$refs.myChart
      const myChart = this.$echarts.init(getChartDom, 'dark')
      // setTimeout(() => {
      //   window.onresize = myChart.resize;
      // }, 1000)
      myChart.setOption({
        title: {
          text: ''
        },
        tooltip: {},
        backgroundColor: 'rgb(14, 26, 45)',
        axisPointer: {
          type: 'shadow'
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.newChart1Data
        }]
      });
    },
    init2 () {
      const getChartDom2 = this.$refs.myChart2
      const myChart2 = this.$echarts.init(getChartDom2, 'dark')
      setTimeout(() => {
        window.onresize = myChart2.resize;
      }, 1000)
      myChart2.setOption({
        title: {},
        tooltip: {},
        backgroundColor: 'rgb(14, 26, 45)',
        axisPointer: {
          type: 'shadow'
        },
        series: [{
          name: '学习型',
          type: 'pie',
          radius: ['50%', '70%'],
          data: this.chart2_data
        }]
      });
    },
    getAge () {
      setInterval(() => {
        getAgeData().then(res => {
          const newAge = res.data.data.age_stat
          this.age = newAge
          // for (const i in newAge) {
          //   this.chart1_data.map(item => {
          //     item.value = newAge[i]
          //   })
          // }
          // console.log(this.chart1_data)
          // this.init()
        })
      }, 3000)
    },
    getSpecialPersonalhandel () {
      setInterval(() => {
        getSpecialPersonal().then(res => {
          this.specialPersonal = res.data.data
        })
      }, 4000)
    },
    getSex () {
      setInterval(() => {
        getSexData().then(res => {
          const arr = res.data.data.sex_stat
          arr.map((item, index) => {
            this.newChart1Data[index].value = item.cnt
            if (item.sex === 1) {
              item.sex = '男'
            } else if (item.sex === 2) {
              item.sex = '女'
            } else {
              item.sex = '其它'
            }
            this.newChart1Data[index].name = item.sex
          })
          this.chart1_data = this.newChart1Data

          this.init()
        })
      }, 2000)
    }
  },
  mounted () {
    this.init()
    this.init2()
    this.getAge()
    this.getSpecialPersonalhandel()
    this.getSex()
  }
}
</script>

<style lang="scss" scoped>
@import "src/assets/scss/var_";

.right_center {
  display: flex;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;

  .left, .right {
    width: $right_chart/2;
    color: #ffffff;

    .list {
      width: 100%;
      height: $center_height/2.2;
      overflow: hidden;
      text-align: center;

      .item {
        font-size: $fontSize_12/2;
        padding: $fontSize_7 0;

        .num {
          font-size: $fontSize_20/2;
          font-weight: bold;
          margin-left: 10px;
          color: #72dbf8;
        }

        .txt {
          font-weight: 500;
          color: #72dbf8;
        }
      }
    }
  }

  .chart {
    width: $right_chart/2;
    height: $center_height/2;
    position: relative;
    box-sizing: border-box;
  }

  /*<!--.txt {-->*/
  /*<!--  position: absolute;-->*/
  /*<!--  left: 50%;-->*/
  /*<!--  top: 50%;-->*/
  /*<!--  transform: translate(-50%, -50%);-->*/
  /*<!--  width: 30px;-->*/
  /*<!--  height: 30px;-->*/
  /*<!--  background: red;-->*/
  /*<!--  z-index: 10;-->*/
  /*<!--}-->*/
}
</style>
